<template>
  <fragment>
    <TelRecord ref="telRcrd" :call-tel="callTel" :call-id="callid" :record-id="recordId"></TelRecord>
    <!-- B2C电商订单记录-->
    <!-- <OrderRecord ref="orderRcrd" online :call-tel="callTel" :call-id="callid" :record-id="recordId" @relevance="relevanceHandle"></OrderRecord> -->
    <!-- ECO电商订单记录-->
    <!-- <OrderRecord ref="orderRcrdECO" online eco :call-tel="callTel" :call-id="callid" :record-id="recordId" @relevance="relevanceHandle"></OrderRecord> -->
    <!-- <OrderRecord ref="orderReatilRcrd" :call-tel="callTel" :call-id="callid" :record-id="recordId" @relevance="relevanceHandle"></OrderRecord> -->
    <Card title="创建工单" line>
      <template v-slot:right>
        <Button type="primary" @click="toKonwledge">知识查询</Button>
      </template>
      <CreateOrder
        ref="createOrder"
        :key="key"
        :disabled="disabled"
        :order-data="orderData"
        :customer-name="customerName"
        :record-id="recordId"
        :get-record-id-fun="createdTelRecordHandle"
        :call-tel="callTel"
        page="call"
        @workOrderSuccess="successHandle"
        @evaluateTypeChange="saveEvaluatType"
      />
    </Card>
  </fragment>
</template>
<script>
import TelRecord from './TelRecord'
// import OrderRecord from './OrderRecord'
// import CreateOrder from '@/views/workOrder/createOrder'
import Card from '@/components/Card'
import { putCreate } from '@/api/telRecord'
import { getOrderDetailPCode } from '@/api/mscInfo'
// 订单编号、 pcode
// 顾客ID（电商订单）、buyer
// 电商平台（电商订单）、platformCode
// 电商店铺（电商订单）、storeId
// 办事处、belongOfficeCode   belongOffice
// 经销商（电商订单的服务商）、serviceProviderCode
// 门店、
// 省、orderReceiverProvince
// 市、orderReceiverCity
// 区/县、orderReceiverDistrict
// 街道、 orderReceiverTown   orderReceiverTownName
// 详细地址（四级地址及详细地址取订单的配送收货地址）orderFullReceiverAddress
// const keys = [
//   'pcode',
//   'buyer',
//   'platformCode',
//   'storeId',
//   'belongOfficeCode',
//   'serviceProviderCode',
//   'orderReceiverProvince',
//   'orderReceiverCity',
//   'orderReceiverDistrict',
//   'orderReceiverTown',
//   'orderFullReceiverAddress'
// ]
export default {
  name: 'DisplayClient',
  components: {
    TelRecord,
    // OrderRecord,
    // CreateOrder,
    Card
  },
  inject: ['closePage', 'checkClosePage', 'createdTelRecordHandle'],
  props: {
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    },
    customerName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderData: {},
      key: 'init',
      evaluateType: '0', // 客服评价
      disabled: false // 是否禁用
    }
  },
  computed: {
    // orderData() {
    //   const t = {}
    //   keys.forEach(key => {
    //     t[key] = this.order[key]
    //   })
    //   return t
    // }
  },
  methods: {
    // 跳转到知识查询
    toKonwledge() {
      this.$router.push({ name: 'KnowledgeSearchMain' })
    },
    async  relevanceHandle(o, online, eco) {
      if (this.disabled) {
        return
      }
      this.key = (Math.random() * 0xfffff).toString(16)

      if (!online) {
        o.online = online
        o.eco = eco
        this.$set(this, 'orderData', o)
        if (this.$refs.orderRcrd) this.$refs.orderRcrd.clearRelevance()
        if (this.$refs.orderRcrdECO) this.$refs.orderRcrdECO.clearRelevance()
      } else {
        await getOrderDetailPCode({ pcode: o.pcode }).then((res) => {
          if (res.success === 1) {
            const orderData = res.data
            orderData.online = online
            orderData.eco = eco

            this.$set(this, 'orderData', orderData)
          }
        })
        if (eco) this.$refs.orderRcrd.clearRelevance()
        else this.$refs.orderRcrdECO.clearRelevance()

        this.$refs.orderReatilRcrd.clearRelevance()
      }
    },
    // 工单操作成功
    successHandle() {
      // this.disabled = true // 20220706取消工单全面禁用
      const data = {
        id: this.recordId,
        evaluateType: this.evaluateType
      }
      this.$emit('on-success')
      putCreate(data).then(res => {
        console.log('通话记录-工单-保存成功！')
      })
      this.checkClosePage({ isSaveOther: true })
    },
    // 保存客服评价类型
    saveEvaluatType(v) {
      this.evaluateType = v
    },
    // 关联客服自己输入的姓名手机
    reNameTel(contactName, contactPhone) {
      const createOrder = this.$refs.createOrder
      if (createOrder) {
        const formData = createOrder.formData
        this.$set(formData, 'contactName', contactName)
        this.$set(formData, 'contactPhone', contactPhone)
      }
    }
  }
}
</script>

